CSS最方便的地方之一在於圓角陰影等外觀上的設定，可以減少依賴圖片，達到讀取速度加快，重點是語法打一打就不用一直存圖縮圖啦xD以下紀錄一些外觀上面的設定。如有誤還請指正，謝謝。
CSS最方便的地方之一在於圓角陰影等外觀上的設定，可以減少依賴圖片，達到讀取速度加快，重點是語法打一打就不用一直存圖縮圖啦xD以下紀錄一些外觀上面的設定。如有誤還請指正，謝謝。

說到CSS外觀部份的進步就不能不提到圓角跟陰影啦，以前要作這個還要費心存成png檔，遇到IE6還要存成gif檔，但是效果也不好（還好現在公司已經不管IE6了）但是圖檔的修改還是頗費心費時，如果又遇到人客的要求：『陰影淡個10趴』、『框線淡個50趴』、『圓角再方一點』....，相信沒有人不會發瘋的！這時候CSS3簡直是救星囉～

因為各家瀏覽器支援度的問題，目前語法部份都還需要加上前綴詞：
Chrome, Safari：-webkit-
Firefox：-moz-
IE：-ms-
Opera：-o-
雖然不是很方便，但以後瀏覽器應該會漸漸淘汰，在這之前還是乖乖的用吧Q_Q
另外除了加前綴以外，最後還是要把不含前綴的屬性＆值加上，這樣日後即使瀏覽不支援前綴詞還是可以讀到正確的設定。
真的真的非常怕麻煩的人也可以試試這個：prefixfree

border-radius
首先是圓角，可以針對四個邊作不同的圓度設定喔～依序是上左 / 上右 / 下右 / 下左：

border-radius: 20px 5px 30px 2px;

如果是兩個值，位置是上左, 下右 / 上右, 下左

border-radius: 20px 5px;

三個值：上左 / 上右, 下左 / 下右

border-radius: 20px 10px 1px;

box-shadow
物件陰影，設定值可以有水平偏移(x)、垂直偏移(y)、模糊強度(blur)、擴散強度 (spread)、陰影顏色(hex or rgba)、內陰影 (inset)
其中水平 / 垂直偏移一定要設定以外，其他可以放水流（誤）可以不用設定。

box-shadow: 10px 10px 5px 20px #ccc;

text-shadow
文字陰影，其設定值有有水平偏移(x)、垂直偏移(y)、模糊強度(blur)、陰影顏色(hex or rgba)。

text-shadow: 2px 2px 5px red;

rbga
可以調整背景色或字色的透明度，背景調淡再也不用改圖囉～R、G、B、A四值分別代表紅色 / 綠色 / 藍色 / 透明度。

background-color: rgba(r, g, b,a );
color: rgba(r, g, b,a );

gradient
漸層也是一個好用的語法，有了漸層以後再也不用擔心背景圖要怎麼切才不會斷掉！
有以下幾種漸層方式：由上到下、由左到右、圓形等呈現方式。

linear-gradient就是線性漸層，可以增加起始位置的值。而不作其他設定就是預設從上到下的漸層。
更活用的是可以設定漸層以及多種顏色，跟彩虹一樣～

background: linear-gradient(red, blue); 

在顏色前面增加結束位置，可以決定橫向 / 直向的漸層。

background: linear-gradient(to left, red , blue);

圓形的漸層則是radial-gradient。

本文同步發表於http://azzurro.blog.aznc.cc/make_a_website_17/